/* 页面布局样式 */
.layout__page {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  overflow: hidden;
  user-select: none;
  background: #f8f8f8;
}

/* 顶部导航 */
.layout__header {
  flex: 0 0 auto;
  background: #fff;
  z-index: 1000;
  position: relative;

  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    & {
      padding-top: 44px;
    }
  }

  @media only screen and (device-width: 414px) and (device-height: 896px) {
    & {
      padding-top: 44px;
    }
  }
}

/* 页面主体（除底部导航） */
.layout__body {
  flex: 0 1 100%;
  font-size: 14px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* 页面底部操作按钮 */
.bottom-button--submit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 10px 16px;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 16px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}

/* 空列表提示语样式 */
.list-no-content-tip {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
}

/* 页面切换默认动画效果 */
.v-enter-active,
.v-leave-active {
  transition: all 0.3s;
}
.v-enter,
.v-leave-to {
  transform: translateX(100%);
}

/* 加载到上层的页面的布局样式 */
.above-loaded-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}
